class SearchPane {
  constructor(el) {
    this.el = $(el);
    this.menu = this.el.find('.dropdown-menu');
    this.btn = this.el.find('.navbar-search-btn');

    this._init();
  }

  isMenuShow() {
    return this.menu.hasClass('show')
  }

  hideMenu() {
    this.menu.removeAttr('data-bs-popper').removeClass('show');
  }

  showMenu() {
    this.menu.addClass('show').attr('data-bs-popper', true);
  }

  toggleMenu() {
    if (this.isMenuShow()) {
      this.hideMenu();
    } else {
      this.showMenu();
    }
  }

  _init() {
    this.btn.on('click', (e) => {
      e.stopPropagation();
      e.preventDefault();

      this.toggleMenu();
    });

    // auto hide when click outside
    $(document).on('click', (e) => {
      if (!this.el.get(0).contains(e.target)) {
        this.hideMenu();
      }
    });
  }
}

$(function() {
  // header bg on scroll
  $(window).on('scroll', (e) => {
    const top = $(document).scrollTop();

    if (top >= 200) {
      $('.header').removeClass('header-translucent');
    } else {
      $('.header').addClass('header-translucent');
    }
  }).trigger('scroll');

  // search pane
  new SearchPane('header.header .search-dropdown');

  // aos animation
  AOS.init();

  // fancybox
  Fancybox.bind('[data-fancybox]');
});
